<!--
 * @Author: CNN 969682281@qq.com
 * @Date: 2023-03-16 10:24:34
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2023-07-05 13:34:59
 * @FilePath: \newMould_BHZ\src\views\pitchManage\dyMonitorManage\real_timeMonitoring.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="department" id="department">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
        <div>
          <!-- <el-checkbox v-model="checked" @change="see()">查看下级</el-checkbox> -->
        </div>
      </div>
      <tree
        :treeData="treeData"
        :checkData="checkData"
        name="pitchManage_treeCheck"
        nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick"
        :defaultProps="defaultProps"
      >
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <el-breadcrumb :title="showName"></el-breadcrumb>
      <div class="text_table" v-if="BhjStatusList.length == 0">
        <div
          style="
            width: 30%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          "
        >
          <img src="@/assets/img/undata.png" alt="" style="width: 100%" />
          <div
            style="
              height: 10%;
              width: 100%;
              text-align: center;
              font-size: 0.2rem;
            "
          >
            暂无数据
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table" v-else>
        <!-- 左 -->
        <div class="content-left">
          <div class="up">
            <el-tabs v-model="activeName">
              <el-tab-pane label="设备状态" name="first">
                <!-- <div class="StatusTitle">
                  <div class="title">
                    <p class="p0"></p>
                    联网
                  </div>
                  <div class="title">
                    <p class="p1"></p>
                    生产
                  </div>
                  <div class="title">
                    <p class="p2"></p>
                    异常
                  </div>
                  <div class="title">
                    <p class="p3"></p>
                    离线
                  </div>
                </div> -->
                <div class="StatusContent">
                  <div
                    v-for="(v, i) in BhjStatusList"
                    class="BHJ-Status"
                    :key="i"
                    @click="yj_FormList(i, v)"
                    :id="'idName' + i"
                  >
                    <!-- <div
                      :class="
                        v.Status == '0'
                          ? 'Status0'
                          : v.Status == '1'
                          ? 'Status1'
                          : v.Status == '2'
                          ? 'Status2'
                          : v.Status == '3'
                          ? 'Status3'
                          : 'Status4'
                      "
                    >
                      <img
                        :src="
                          v.Status == '0'
                            ? img0
                            : v.Status == '1'
                            ? img1
                            : v.Status == '2'
                            ? img2
                            : img3
                        "
                        alt=""
                      />
                    </div> -->
                    <div class="Status0">
                      <img :src="img0" alt="" />
                    </div>
                    <div class="BHJ-Name" v-text="v.BhjName"></div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="center">
            <el-tabs v-model="activeName">
              <el-tab-pane label="生产数据" name="first">
                <produce :produceData="produceData"></produce>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!-- 右-->
        <div class="content-right">
          <div class="up">
            <el-tabs v-model="activeName">
              <el-tab-pane label="拌和时间监控" name="first">
                <monitoringTime
                  :monitoringTimeX="monitoringTimeX"
                  :monitoringTimeY="monitoringTimeY"
                ></monitoringTime>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="center">
            <el-tabs v-model="activeName">
              <el-tab-pane label="拌和温度监控" name="first">
                <temperature
                  :temperatureX="temperatureX"
                  :temperatureY="temperatureY"
                ></temperature>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="bottom">
            <!-- <div class="tab">
              <div
                v-for="(data, index) in typeData"
                :key="data.value"
                @click="changeType($event, index)"
              >
                <div
                  class="btn"
                  :style="{
                    color:
                      data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                    background: data.show === true ? '#E0EFFF' : '#fff',
                  }"
                >
                  {{ data.text }}
                </div>
              </div>
            </div>

            <div class="charts" v-if="typeData[0].show">
              <oilstone :height="chartsHeight"></oilstone>
            </div>
            <div class="charts" v-if="typeData[1].show">
              <pitchy :height="chartsHeight"></pitchy>
            </div> -->
            <el-tabs v-model="activeName">
              <el-tab-pane label="油石比监控" name="first">
                <oilstone
                  :oilstoneX="oilstoneX"
                  :oilstoneY="oilstoneY"
                ></oilstone>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tree from "@/components/public/pitchManage_tree"; //左侧机构树
import elBreadcrumb from "@/components/public/el-breadcrumb.vue"; //面包屑
import produce from "@/components/pitchManage/dyMonitorManage/produce.vue"; //生产数据
import monitoringTime from "@/components/pitchManage/dyMonitorManage/monitoringTime.vue"; //拌和时间监控
import temperature from "@/components/pitchManage/dyMonitorManage/temperature.vue"; //拌和温度监控
import oilstone from "@/components/pitchManage/dyMonitorManage/oilstone.vue"; //油石比
// import pitchy from "@/components/pitchManage/dyMonitorManage/pitchy.vue"; //沥青含量

// import formJs from "./regexDetail.js"; //新增弹框配置项

import {
  getUserCompanyTreeList, //左侧机构树接口
  getAsphaltMachines, //拌合站接口
  getAsphaltStatistics, //详情
} from "@/api/request.js";

// multiLevel
export default {
  name: "real_timeData",
  components: {
    // vDatePicker, //时间选择器
    tree, //左侧组织机构数
    elBreadcrumb, //面包屑
    produce, //生产数据
    monitoringTime, //时间监控
    temperature, //拌和温度监控
    oilstone, //油石比
    // pitchy, //沥青含量
  },
  data() {
    return {
      name: "pitchManage", //按钮配置页面代号
      activeName: "first",
      activeName1: "first",
      chartsHeight: null,
      // typeData: [
      //   { text: "油石比监控", show: true },
      //   { text: "沥青含量监控", show: false },
      // ],
      //   yj_view: null, //查看按钮是否显示

      // 机构树
      companyTree: "", //机构树初步所有数据
      treelength: false, //左侧树显示隐藏
      treeData: [], //左侧树状图数据
      checkData: [],
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      treeText: {
        //树状图参数
        companyId: null,
        userId: null,
        text: null,
      },
      //   checked: true, //查看下级按钮
      // 机构树

      // 页面
      // 设备状态
      idName: "",
      colorBg: "",
      BhjStatusList: [
        // {
        //   BhjName: "BHJ01",
        //   Status: "0",
        // },
        // {
        //   BhjName: "BHJ02",
        //   Status: "1",
        // },
        // {
        //   BhjName: "BHJ03",
        //   Status: "2",
        // },
        // {
        //   BhjName: "BHJ04",
        //   Status: "3",
        // },
        // {
        //   BhjName: "BHJ05",
        //   Status: "0",
        // },
      ],
      img0: require("@/assets/img/pitchMange/actualtime-0.png"), //联网
      img1: require("@/assets/img/pitchMange/actualtime-1.png"), //生产
      img2: require("@/assets/img/pitchMange/actualtime-2.png"), //异常
      img3: require("@/assets/img/pitchMange/actualtime-3.png"), //离线
      // 设备状态

      // 列表给后端传参
      getList: {
        companyId: "", // 施工标段id
        machineId: "", // 拌合机ID
      },
      // 页面

      // 右顶部配置
      value2: "", //主页面日期筛选绑定值
      bhjDataList: [], //拌合机
      showName: "未选择公司",
      // 右顶部配置
      userInfo: {}, //登录用户
      //   highlightBd: true, //左侧机构树停留背景色

      monitoringTimeX: [], //拌和时间
      monitoringTimeY: [], //拌和时间
      temperatureX: [], //溫度
      temperatureY: [], //溫度
      oilstoneX: [], //油石比
      oilstoneY: [], //油石比
      produceData: {},
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("yjSmart-userInfo"));
    // console.log("userInfo", this.userInfo);

    if (JSON.parse(sessionStorage.getItem("yjSmart-pitchManage_treeCheck"))) {
      var id = JSON.parse(sessionStorage.getItem("yjSmart-pitchManage_treeCheck"));
      this.checkData = [id.fCompanyid];
    }

    this.getHeight();
    this.getTree();
  },

  methods: {
    // 左侧树结构
    getTree() {
      this.treeText = {
        companyId: this.userInfo.companyId,
        userId: this.userInfo.userId,
        text: "3", // 0其他  1 砼拌合站 2水稳 3沥青
      };
      getUserCompanyTreeList(this.treeText)
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.userCompanyTreeList;
            this.treeData = this.commonJs.tranListToTreeData(companyTree);
            if (this.treeData[0].children == undefined) {
              this.treelength = false; //左侧组织机构是否显示
            } else {
              this.treelength = true;
            }

            if (this.checkData[0]) {
              this.showName = JSON.parse(
                sessionStorage.getItem("yjSmart-pitchManage_treeCheck")
              ).fShortname;
              this.getList.companyId = this.checkData[0];
            } else {
              this.checkData[0] = this.treeData[0].fCompanyid;
              this.showName = this.treeData[0].fShortname; //当前点击组织机构名称
              this.getList.companyId = this.treeData[0].fCompanyid; //当前点击组织机构ID
            }
            this.getMachineList(this.getList.companyId);

            // 列表
          } else {
            this.$message.error(res.msg);
            // this.$message.error("获取组织机构失败");
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    },
    // 点击左侧机构树
    handleNodeClick(data) {
      this.showName = data.fShortname; //顶部显示机构名
      this.getList.companyId = data.fCompanyid;
      this.getList.machineId = ""; // 拌和机编号
      this.value2 = [
        this.common.getDay(-6) + " " + "00:00:00",
        this.common.getDay(0) + " " + "23:59:59",
      ];
      this.getMachineList(this.getList.companyId);
    },
    // 获取拌合站列表
    getMachineList(data) {
      this.BhjStatusList = [];
      getAsphaltMachines({ companyId: data })
        .then((res) => {
          if (res.errcode == 0) {
            var BhjList = {
              BhjName: "",
              Status: "",
            };
            var BhjStatus = [];
            BhjStatus = res.data.asphaltMachines;
            BhjStatus.map((item) => {
              BhjList = {
                BhjId: item.machineId,
                BhjName: item.machineName,
                Status: "0",
              };
              this.BhjStatusList.push(BhjList);
            });
            if (this.BhjStatusList.length != 0) {
              this.getList.machineId = this.BhjStatusList[0].BhjId;
              this.yj_searchForm(this.getList);
            }
          } else {
            this.$message.error(res.msg);
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    },
    // 点击拌和机调取数据
    yj_FormList(i, data) {
      // 设备状态点击数据
      for (let index = 0; index < this.BhjStatusList.length; index++) {
        if (i == index) {
          let BgColor = document.getElementById("idName" + i);
          BgColor.style.backgroundColor = "rgba(0, 127, 255, 0.12)";
        } else {
          let BgColor = document.getElementById("idName" + index);
          BgColor.style.backgroundColor = "#fafafa";
        }
      }
      this.getList.machineId = data.BhjId;
      this.yj_searchForm(this.getList);
    },

    // 获取列表数据
    yj_searchForm(data) {
      this.monitoringTimeX = [];
      this.monitoringTimeY = [];
      this.temperatureX = [];
      this.temperatureY = [];
      this.oilstoneX = [];
      this.oilstoneY = [];
      this.produceData = {
        totalWeight: 0, // 生产总重量,
        qualifiedWeight: 0, // 合格重量
        warningWeight: 0, // 报警重量
        totalCount: 0, // 生产总批次
        qualifiedCount: 0, // 合格批次
        warningCount: 0, // 报警批次
      };
      getAsphaltStatistics(data)
        .then((res) => {
          if (res.errcode == 0) {
            // console.log("列表页详情", res);
            this.monitoringTimeX = res.data.mixDurationMap.datesList; //拌和时间
            this.monitoringTimeY = res.data.mixDurationMap.mixdurationList; //拌和时间

            this.temperatureX = res.data.mixTemperatureMap.datesList; //溫度
            this.temperatureY = res.data.mixTemperatureMap.mixTemperatureList; //溫度

            this.oilstoneX = res.data.asphaltStoneRatioMap.datesList; //油石比
            this.oilstoneY =
              res.data.asphaltStoneRatioMap.mixAsphaltStoneRatioList; //油石比
            this.produceData = res.data.mixTotalInfo; //生产数据
          } else {
            this.$message.error(res.msg);
            return false;
          }
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
    },

    getHeight() {
      var h = document.documentElement.clientHeight - 91; //获取页面可见高度
      this.chartsHeight = h * 0.33 - 30;
    },
    // changeType(e, index) {
    //   for (let i in this.typeData) {
    //     if (parseFloat(i) === index) {
    //       this.typeData[i].show = true;

    //     } else {
    //       this.typeData[i].show = false;
    //     }
    //   }
    // },
  },
};
</script>
  
<style scoped lang="less">
.text_table {
  display: flex;
  justify-content: space-between;
  background: #f0f2f5;
  position: relative;

  // 左
  .content-left {
    width: 32.5%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .up,
    .center {
      width: 100%;
      height: 49.75%;
      background: #fff;
      padding: 0 0.15rem 0.15rem;
      box-sizing: border-box;

      .StatusTitle {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

        .title {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 0.1rem;

          p {
            width: 0.08rem;
            height: 0.08rem;
            margin-right: 0.05rem;
          }

          .p0 {
            background: #00ce8b;
          }

          .p1 {
            background: #007fff;
          }

          .p2 {
            background: #f86a3e;
          }

          .p3 {
            background: rgba(126, 134, 142, 0.6);
          }
        }
      }

      .StatusContent {
        width: 100%;
        // height: calc(100% - 40px);
        height: 100%;
        overflow: auto;
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // align-items: center;
        .BHJ-Status {
          width: 100%;
          height: 0.7rem;
          background: #fafafa;
          display: flex;
          border-radius: 0.06rem;
          margin-bottom: 0.2rem;
          .Status0,
          .Status1,
          .Status2,
          .Status3 {
            width: 40%;
            height: 100%;
            border-radius: 0 0.5rem 0.5rem 0;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 0.5rem;
              height: 0.45rem;
            }
          }

          .Status0 {
            background: rgba(0, 206, 139, 0.12);
          }

          .Status1 {
            background: rgba(0, 127, 255, 0.12);
          }

          .Status2 {
            background: rgba(248, 106, 62, 0.12);
          }

          .Status3 {
            background: rgba(126, 134, 142, 0.12);
          }

          .BHJ-Name {
            width: 60%;
            height: 100%;
            // display: flex;
            // justify-content: center;
            // align-items: center;
            padding-left: 20px;
            line-height: 0.7rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  // 右
  .content-right {
    width: 67%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .up,
    .center,
    .bottom {
      width: 100%;
      height: 33%;
      background: #fff;
      padding: 0 0.15rem 0.15rem;
      box-sizing: border-box;
      font-size: 12px;
    }

    .bottom {
      display: flex;
      flex-direction: column;

      .tab {
        display: flex;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        border-bottom: 2px solid #e4e7ed;
        padding: 0 0.16rem;

        .btn {
          margin-top: 4px;
          margin-right: 16px;
          width: 102px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-top-right-radius: 4px;
          border-top-left-radius: 4px;
        }
      }

      .charts {
        height: calc(100% - 30px);
      }
    }
  }
}

/deep/ .el-tabs__header {
  height: 30px;
  margin: 0;
}

/deep/ .el-tabs,
/deep/ .el-tabs__nav-wrap,
/deep/ .el-tabs__nav-scroll,
/deep/ .el-tabs__nav,
/deep/ .el-tab-pane {
  height: 100%;
}

/deep/ .el-tab-pane {
  //后期可删除
  font-size: 0.14rem;
}

/deep/ .el-tabs__nav {
  display: flex;
}

/deep/ .el-tabs__content {
  height: calc(100% - 30px);
  overflow: hidden;
  box-sizing: border-box;
}

/deep/ .el-tabs__item {
  height: 100%;
  line-height: 30px;
  display: block;
}

.up /deep/ .el-tabs__item.is-active,
.center /deep/ .el-tabs__item.is-active,
.bottom /deep/ .el-tabs__item.is-active {
  color: #000; //取消默认选中蓝色字体
}

.up /deep/ .el-tabs__active-bar,
.center /deep/ .el-tabs__active-bar,
.bottom /deep/ .el-tabs__active-bar {
  background-color: transparent; //取消默认选中底部蓝色线条
}
</style>
  